<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Books</title>
    <%@ include file="./includes/bulma.jsp" %>
  </head>
  <body>
    <%@ include file="./includes/navbar.jsp" %>
	<section class="section">
      <div class="columns">
        <div class="column is-4-tablet is-3-desktop is-2-widescreen">
            <%@ include file="./includes/sidebar.jsp" %>      
        </div>
        <div class="column">
          <h1 class="title ">Books</h1>
        
          <nav class="level">
            <div class="level-left">
              <div class="level-item">
                <p class="subtitle is-5">
                  <strong>6</strong> books
                </p>
              </div>
        
              <p class="level-item">
                <a class="button is-success" href="new-book.html">New</a>
              </p>
        
              <div class="level-item is-hidden-tablet-only">
                <div class="field has-addons">
                  <p class="control">
                    <input class="input" type="text" placeholder="Book name, ISBN…">
                  </p>
                  <p class="control">
                    <button class="button">
                      Search
                    </button>
                  </p>
                </div>
              </div>
            </div>
        
            <div class="level-right">
              <div class="level-item">
                Order by
              </div>
              <div class="level-item">
                <div class="select">
                  <select>
                    <option>Publish date</option>
                    <option>Price</option>
                    <option>Page count</option>
                  </select>
                </div>
              </div>
            </div>
          </nav>
        
          <div class="columns is-multiline" id="books-container"></div>
        
          <nav class="pagination">
            <a class="pagination-previous">Previous</a>
            <a class="pagination-next">Next page</a>
            <ul class="pagination-list">
              <li>
                <a class="pagination-link">1</a>
              </li>
              <li>
                <span class="pagination-ellipsis">&hellip;</span>
              </li>
              <li>
                <a class="pagination-link">45</a>
              </li>
              <li>
                <a class="pagination-link is-current">46</a>
              </li>
              <li>
                <a class="pagination-link">47</a>
              </li>
              <li>
                <span class="pagination-ellipsis">&hellip;</span>
              </li>
              <li>
                <a class="pagination-link">86</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </section>
    <script src="javascripts/load_books.js" text="javascripts"></script>
  </body>
</html>
